<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../word/word/css/ydui.css">
    <script src="../word/word/js/jquery.js"></script>

</head>
<body>
<section id="J_List">
    <div id="J_ListContent"></div>
</section>
<script src="../word/word/js/ydui.js"></script>
<script>
    $(function () {
        var page = 1, pageSize = 10;

        $('#J_List').infiniteScroll({
            pageSize: pageSize,
            initLoad: true,
            backposition: true,
            jumpLink: '.J_Link',
            loadListFn: function () {
                var def = $.Deferred();

                $.ajax({
                    type: 'GET',
                    url: 'http://pk.tebieshengqian.com/get_banner',
                    dataType: 'json',
                    data: { page: page, pagesize: pageSize },
                    success: function (ret) {
                        var obj = ret.result.banner
                        var html = obj + '<span class="J_Link" data-page="' + page + '">'+ obj.pic +'</span>';
                        /* 特别注意：拼接后的HTML每条数据应包含.J_Link和当前的页面标记data-page，例： */
                        /* <a href="跳转链接" class="J_Link" data-page="' + page + '">内容内容内容</a> */
                        $('#J_ListContent').append(html);

                        def.resolve(ret.list);

                        ++page;
                    }
                });

                return def.promise();
            },
            /**
             * 当前从详情页返回列表页时调用此方法
             * @param listData 该次所需加载的数据集合
             * @param retPage 该次加载的页码
             */
            loadStorageListFn: function (listData, retPage) {
                var def = $.Deferred();

                page = retPage;

                var html = '';
                listData.forEach(function (val) {
                    html += (val.list + '将数据拼接成html，格式同loadListFn方法一致');
                });
                $('#J_ListContent').append(html);

                def.resolve();
                return def.promise();
            }
        });
    })
</script>
</body>
</html>